---
title: 'Styled Components'
---

# Styled Components

Theme UI itself doesn’t expose an API for styled components, but works
seamlessly with the `styled` API from the [@emotion/styled][] package.
Components written with it should have access to the same theming context that
Theme UI uses.

Instead of using the `ThemeProvider` component from `@emotion/react`, import and
use the Theme UI provider at your app’s root level.

```jsx
/** @jsxImportSource theme-ui */
import { ThemeUIProvider } from 'theme-ui'
import theme from './theme'
import SomeComponent from './SomeComponent'

export default (props) => (
  <ThemeUIProvider theme={theme}>
    <SomeComponent />
  </ThemeUIProvider>
)
```

If you’re using the [Styled Components][] library, these can usually be
converted to use Emotion with a single line change to the `import` statement.

```js
// before
import styled from 'styled-components'
```

```js
// after
import styled from '@emotion/styled'
```

[@emotion/styled]: https://emotion.sh/docs/styled
[styled components]: https://styled-components.com

## Using the `sx` prop

Theme UI is actively working on removing its internal dependency on
`@emotion/styled` to reduce bundle size. While Styled Components made with the
package will continue to work into the future, we recommend using the
[`sx` prop](/sx-prop) instead for simpler styling with
[object styles](/guides/object-styles).

```jsx
/** @jsxImportSource theme-ui */

const Section = ({ width, color, bg, ...props }) => (
  <section
    {...props}
    sx={{
      width,
      color,
      bg,
      // additional styles...
    }}
  />
)
```
